<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1280px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <statisticsConfig v-if="source && source.ControlType == 0" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <censusTableConfig v-else-if="source && source.ControlType == 2" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <chartConfig v-else-if="source && source.ControlType == 1" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <dataTableConfig v-else-if="source && source.ControlType == 4" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <searchConfig v-if="source && source.ControlType == 3" ref="control" :page-id="pageId" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <rowConfig v-else-if="source && source.ControlType == 5 && source.ControlId == layoutControl.row" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <tabsConfig v-else-if="source && source.ControlType == 5 && source.ControlId == layoutControl.tabs" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <tabConfig v-else-if="source && source.ControlType == 5 && source.ControlId == layoutControl.tab" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <cardConfig v-else-if="source && source.ControlType == 5 && source.ControlId == layoutControl.card" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <signpostConfig v-else-if="source && source.ControlType == 6 && source.ControlId == basicControl.signpost" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <baseConfig v-else-if="source && source.ControlType == 6" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <formConfig v-else-if="source && source.ControlType == 5 && source.ControlId == layoutControl.search" ref="control" :source="source" :content-width="contentWidth" :lock-width="lockWidth" />
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as layoutApi from '@/customForm/api/pageLayout'
import { layoutControl, basicControl } from '@/customForm/config/formConfig'
import statisticsConfig from './statisticsConfig.vue'
import chartConfig from './chartConfig.vue'
import dataTableConfig from './dataTableConfig.vue'
import rowConfig from './rowConfig.vue'
import tabConfig from './tabConfig.vue'
import tabsConfig from './tabsConfig.vue'
import cardConfig from './cardConfig.vue'
import baseConfig from './baseConfig.vue'
import signpostConfig from './signpostConfig.vue'
import searchConfig from './searchConfig.vue'
import formConfig from './formConfig.vue'
import censusTableConfig from './censusTableConfig.vue'
export default {
  components: {
    statisticsConfig,
    chartConfig,
    dataTableConfig,
    rowConfig,
    tabsConfig,
    tabConfig,
    cardConfig,
    baseConfig,
    signpostConfig,
    searchConfig,
    formConfig,
    censusTableConfig
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    },
    pageId: {
      type: String,
      default: null
    },
    lockWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      layoutControl,
      basicControl,
      source: null,
      title: '编辑控件'
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.$nextTick(this.reset)
        } else {
          this.source = null
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    async reset() {
      const data = await layoutApi.Get(this.id)
      this.source = data
      this.title = '编辑控件：' + data.Name
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      this.$refs.control.resetForm()
    },
    async save() {
      const data = await this.$refs.control.save()
      const res = await layoutApi.Set(this.id, data)
      this.$message({
        type: 'success',
        message: '修改成功!'
      })
      this.$emit('update:visible', false)
      this.$emit('close', res, this.id, data, this.source.ControlType)
    }
  }
}
</script>

